<template>
  <div class="account-container">
     <div :style="{float: 'right', marginBottom: '30px'}">
      <el-button type="primary" @click="addClick" v-if="userInfo.account === 'admin'">新增账号</el-button>
    </div>

    <!-- 列表 -->
    <div class="table-container">
      <el-table
        :data="list"
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id">
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称">
        </el-table-column>
        <el-table-column
          label="操作">
          <template slot-scope="scope">
            <el-button @click="edit(scope.row)" type="text" size="mini" :disabled="btnDisabled || scope.row.account === 'admin'">编辑</el-button>
            <el-button @click="del(scope.row)" type="text" size="mini" :disabled="btnDisabled || scope.row.account === 'admin'">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page-container">
      <el-pagination
        background
        :page-size="pageObj.pageSize"
        layout="prev, pager, next"
        @current-change="currentChange"
        :total="total">
      </el-pagination>
    </div>
    <!-- 新增/编辑分类弹窗 -->
    <el-dialog
      center
      :title="dialogStatus === 1 ? '新增账号' : '编辑账号'"
      :visible.sync="dialogShow"
      @close="close">

      <el-form ref="form" label-width="100px" :model="form" :rules="rules" label-position="top">
        <el-form-item label="姓名" prop="name">
          <el-input placeholder="请输入姓名" v-model="form.name" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="账号" prop="account">
          <el-input placeholder="请输入账号" :disabled="dialogStatus === 2" v-model="form.account" maxlength="16"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" v-model="form.password" maxlength="16" type="password"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password1">
          <el-input placeholder="请输入密码" v-model="form.password1" maxlength="16" type="password"></el-input>
        </el-form-item>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="close">取 消</el-button>
        <el-button size="mini" type="primary" @click="submit">确 定</el-button>
      </span>
    </el-dialog>
  </div>  
</template>

<script>
import md5 from 'js-md5';
export default {
  data () {
    const validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    }
    return {
      dialogStatus: null,
      dialogShow: false,
      form: {
        name: '',
        account: '',
        password: '',
        password1: ''
      },
      editId: null,
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ],
        account: [
          { required: true, message: '请输入账号', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 5 到 16 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ],
        password1: [
          { validator: validatePass, trigger: 'blur' }
        ]
      },
      list: [],
      pageObj: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0
    }
  },
  computed: {
    userInfo () {
      return this.$store.state.user
    },
    btnDisabled () {
      return this.$store.state.user.account !== 'admin'
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    addClick () {
      this.dialogStatus = 1
      this.dialogShow = true
    },
    submit () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          let params = {
            name: this.form.name,
            account: this.form.account,
            password: md5(this.form.password)
          }
          let url = '/admin/account/add'
          if (this.dialogStatus === 2) {
            params.id = this.editId
            delete params.account
            url = '/admin/account/edit'
          }
          this.$fetch(url, params).then(res => {
            if (res.code === 200) {
              this.$message.success(res.msg)
              this.close()
              this.getList()
            } else {
              this.$message.error(res.msg)
            }
          })
        } else {
          return false;
        }
      })
    },
    close () {
      this.dialogShow = false
      this.form.name = ''
      this.$refs['form'].resetFields()
    },
    async getList () {
      const result = await this.$fetch('/admin/account/list', this.pageObj)
      if (result.code !== 200) {
        this.$message.error(result.msg)
        return
      }
      this.list = result.data.rows
      this.total = result.data.count
    },
    currentChange (e) {
      this.pageObj.pageNo = e
      this.getList()
    },
    edit (e) {
      this.form.name = e.name
      this.form.account = e.account
      this.editId = e.id
      this.dialogStatus = 2
      this.dialogShow = true
    },
    del (e) {
      this.$confirm(`此操作将永久删除《${e.name}》, 是否继续?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        const result = await this.$fetch('/admin/account/del', { id: e.id })
        if (result.code === 200) {
          this.$message.success('删除成功')
          this.getList()
        } else {
          this.$message.error(result.msg)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .account {
    &-container {
      margin: 30px;
    }
  }
</style>